<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="/public/css/pc/login.css">
</head>

<body>
  <div class="main">
    <div class="header">
      <h1>用户登录</h1>
    </div>

    <form id="login_form">
      <div class="form-group">
        <label for="user_num">学号/工号</label>
        <input type="text" class="form-control" id="user_num" name="user_num" placeholder="学号" autofocus>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
      </div>

      <button type="submit" class="btn btn-success btn-block">登录</button>
    </form>

    <div class="message text-center">
      <p>没有账号? <a href="/register">点击创建</a>.</p>
    </div>

  </div>

  <script src="/node_modules/jquery/dist/jquery.js"></script>
  <script>
    $('#login_form').on('submit', function (e) {
      e.preventDefault()
      var formData = $(this).serialize()
      // console.log(formData)
      $.ajax({
        url: '/login',
        type: 'post',
        data: formData,
        dataType: 'json',
        success: function (data) {
          // 状态码 500服务器异常、0 学生登录、1 教师登录、2 学号工号或密码错误

          var code = data.code
          console.log(code);
          if (code === 0) {
            // 服务端重定向针对异步请求无效
            window.location.href = '/'
          } else if (code === 500) {
            window.alert('服务器忙，请稍后重试！')
          } else if (code === 1) {
            alert('账号或密码错误')
          }
        }
      })
    })
  </script>
</body>

</html>
